<template>
  <template v-if="!examList.length">
    <header class="flex justify-center items-center bg-white py-[6px] text-[#7C7C7C] text-[12px]">
      还没有考试哦
    </header>
  </template>
  <template v-else>
    <ul class="w-full  flex flex-col gap-[10px] pb-[60px]">
      <li class="w-full bg-white pt-[19.5px] pb-[8.5px] enter-y" v-for="i in examList" :key="i.key">
        <header class="flex justify-between items-center px-[43.5px]">
          <h1 class="text-[16px] text-[#484848]">
            {{ i.test_name }}
          </h1>
          <span class="text-[13px] text-[#5B5B5B]"> {{ i.time_limit }}分钟 </span>
        </header>
        <section class="mt-[8px] px-[19.5px] text-[15px] text-[#5B5B5B]">
          <p>科目：{{ i.subject_name }}</p>
          <p class="mt-[10px]"> 截止时间:{{ i.exam_deadline }} </p>
        </section>
        <footer class="mt-[19px] flex justify-center">
          <var-button type="primary" @click="router.push({ name: 'examlist' })" color="#12B7ED">
            立即前往
          </var-button>
        </footer>
      </li>
    </ul>
  </template>
</template>

<script setup lang="ts">
  import { getExamList } from '@/api/user';
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  import { StudentExam } from '@/utils/interface';
  const router = useRouter();

  let examList = ref<StudentExam[]>([]);
  const getYetExamList = async () => {
    try {
      const { getUserId } = storeToRefs(useUserInfoStoreWithOut());
      const { data } = await getExamList(getUserId.value);
      console.log(data);

      examList.value = data;
    } catch {
      router.replace({ name: 'home' });
    }
  };
  getYetExamList();
</script>

<style scoped>
  :deep(.var-button) {
    @apply rounded-full w-[33.333333vw];
  }
</style>
